<template>
	<view class="content">
		
		<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true" previous-margin="20px" next-margin="20px">
			<swiper-item v-for="(item, index) in swipers" :key="index" >
				<view :class="item.colorClass" class="swiper-item">
					<image class="image" :src="item" mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper>
		
		<br>
		<view class="tupian">
			<button @click="uploadPictures">
				<image src='/static/images/camera.png' class='ai-paizhao'></image>
			</button>
			<view class="txt">
				<text >以图搜图</text>
			</view>
			<view class="tupian_view">
				<image class="tupian1" v-for="(item,index) in images" :key="index" :src="item" @click="previewPictures(item)"></image>
			</view>
		</view>
	</view>

	

</template>
 
<script>
	export default {
		data() {
			return {
				images:[],
				swipers:["https://alifei01.cfp.cn/creative/vcg/nowater800/new/VCG211130643173.jpg",
				"https://tenfei02.cfp.cn/creative/vcg/nowarter800/new/VCG211128361998.jpg",
				"https://tenfei05.cfp.cn/creative/vcg/nowarter800/new/VCG211127747105.jpg",
				"https://alifei03.cfp.cn/creative/vcg/nowater800/new/VCG211100994635.jpg"]
			};
		},
		onLoad(options) {
			
		},
		onShow() {
			console.log('页面显示了');
			console.log(this.swipers);
		},
		onReady() {
			console.log('页面初次渲染完成了')
		},
		onHide() {
			console.log('页面隐藏了')
		},
		onUnload() {
			console.log('页面卸载了')
		},
		onResize() {
			console.log('页面窗口尺寸发生变化了')
		},
		methods:{
			uploadPictures() {
				uni.chooseImage({
					success:res => {
						console.log(res)
						// 将选择的本地图片赋值给data中定义的images变量
						this.images = res.tempFilePaths;
						console.log(this.images)
					}
				})
			},
			/* 
			图片预览 
			 */
			previewPictures(item) {
				uni.previewImage({
					current:item,
					urls:this.images
				})
			}
		}
	}
</script>
 

<style>
		
	page{
		width: 100%;
		height: 100%;
	}
	uni-image {
		display: block;
	}	
	button{
		width: 200rpx;
		height: 200rpx;
	}
	.swiper{
		height:200px;
	}

	.home{
		width: auto;
		height: auto;
		margin: 25px;
		margin-top: 0px;
	}
	.content .tupian button image{
		margin-top: 25rpx;
	}
	.content .tupian{
		margin-top: 75rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.ai-paizhao{
		width: 150rpx;
		height: 150rpx;
	}
	.txt {
		/* font-size: 24rpx; */
		text-align: center;
		font-weight: bold;
		color: #000000;
		margin-top: 10rpx;
	}
	page{
		width: 100%;
		height: 100%;
	}
	.content {
		/* text-align: center; */
		height: 100vw;
	}
	.swiper-box {
		/* width: 95%; */
		height: 400rpx;
	}
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
		margin: 10px;
		border-radius: 15upx;
		height: 380upx;
	}
	.image {
		/* width: 750rpx; */
		height: 380upx;
		border-radius: 15upx;
	}
	.content .tupian .tupian1{
		border-radius: 15rpx;
	}
	.content .tupian .tupian_view{
		display:flex;                    //flex布局
		justify-content: center;         //水平轴线居中
		align-items:center;                //垂直居中
		margin-top: 20rpx;
	}
</style>
